<template>
    <div class="box">
        <h3>模块化使用</h3>
        <div>state</div>
        <div>普通使用: {{ $store.state.child2.msg }}</div>
        <div>辅助函数: {{ msg }}</div>
        <div>getters</div>
        <div>普通展示: {{ $store.getters.child2Msg }}</div>
        <div>辅助函数: {{ child2Msg }}</div>
        <button @click="changeMsg">修改state中数据</button>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
export default {
    name: "Child2",
    computed: {
        ...mapState({
            msg: state => state.child2.msg
        }),
        ...mapGetters(['child2Msg'])
    },
    methods: {
        ...mapActions(['changeChild2Message']),
        ...mapMutations(['SET_CHILD2_MSG']),
        changeMsg() {
            // actions
            // 普通使用
            // this.$store.dispatch('changeChild2Message', 'zhangsan')
            // 辅助函数
            // this.changeChild2Message('lisi')
            
            // mutaions
            // 普通使用
            // this.$store.commit('SET_CHILD2_MSG', 'zhangsan')
            // 辅助函数
            this.SET_CHILD2_MSG('lisi')
        }
    }
};
</script>

<style scoped>
</style>
